<!doctype html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8" />
	<title>Vue2.0</title>
	<link rel="stylesheet" href="css/bootstrap.css" />
	<script src="js/vue.js"></script>
	<script src="js/jquery-1.11.2.js"></script>
	<style>
     body{
	background: #eee;
     }
     .computed{
	color:red;
     }
    .active{
	background: red;;
    }
    .active2{
	background: green;
    }
   </style>
</head>
<body> 
	 <div class="container" >
	       <h2>组件化开发稍微深入</h2>
	 		<div id="app" style="padding:20px;">
	 		 <h3>我是app  第一个Vue实例渲染的html (全局组件)</h3>
	                 <my-content></my-content>
	                 
	 		 </div>
	 		 
	 		 <div id="app2" style="padding:20px;">
	 		  <h3>我是app2 第二个Vue实例渲染的html (局部组件)</h3>
	 		 <my-content></my-content>
	 		 <my-component2></my-component2>
	 		 </div>
	 		 
	 		  <div id="app3" style="padding:20px;">
	 		  <h3>我是app3 第三个Vue实例  组件是独立的 每个组件都有自己的值 正常情况下组件与组件之间内部计算结果值互不干扰</h3>
	 		    <my-component3></my-component3>
	 		    <my-component3></my-component3>
	 		    <my-component3></my-component3>
	 		 </div>
	 		 
	 		   <div id="app4" style="padding:20px;">
	 		  	<h3>我是app4 第四个Vue实例 每个组件根据需要 可以传递不同的值props给指定的子组件 让组件与组件之间初始化时就不同</h3>
	 		    <my-component4  props="Hello word!"></my-component4>
	 		    <my-component4  props="Hi Vue!"></my-component4>
	 		    <my-component4  props="is so  cool!"></my-component4>
	 		 </div>
	 		 
	 		   <div id="app5" style="padding:20px;">
	 		  	<h3>我是app5 第五个Vue实例 动态props 与字符串props的区别</h3>
	 		    <my-component5 string="hello word！"   v-bind:props="8*7"></my-component5>
	 		    <my-component5 string="hello China！"  v-bind:props="4+5-2" ></my-component5>
                <p style="margin:10px; color:#333; font-size:18px;" >
                 <p><span style="color:red;">引自官网：</span>prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。 </p>
 				<p>另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你<span style="color:red;">不应该</span>在子组件内部改变 prop 。如果你这么做了，Vue 会在控制台给出警告。 </p>
	 		     <p>注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它<span style="color:red;">会影响</span>父组件的状态。 </p>
	 		      </p>
	 		 </div> 
	 		 
	 		 <div id="app6" style="padding:20px;">
	 		  <h3>我是app6 第六个Vue实例 props验证 组件可以为 props 指定验证要求。如果未指定验证要求，Vue 会发出警告。当组件给其他人使用时这很有用。</h3>
	 		  <my-component6 v-bind:array="[1,2,3,4,5]" v-bind:number="o"></my-component6>
	 		 </div>
	 		 
	 		  <div id="app7" style="padding:20px;">
	 		  <h3>我是app7 第六个Vue实例 父组件可以在使用 v-on 绑定自定义事件 然后在子组件中通过$emit来触发父组件的自定义事件。这样做的目的是让 父组件与子组件完全解耦。</h3>
	 		  <p>父组件的值 {{ total }}</p>
	 		  <my-component7 v-on:parent="parentUpdate"></my-component7>
	 		  <my-component7 v-on:parent="parentUpdate"></my-component7>
	 		  <p><span style="color:red;">引自官网：</span>我们知道，父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，应该怎样做？那就是自定义事件！</p>
	 		 </div>
	 		 
	 		 <div id="app8" style="padding:20px;">
	 		  <h3>我是app8 第八个Vue实例 兄弟组件之间的通信</h3>
	 		   <my-component8></my-component8>
	 		   <my-component8-2></my-component8-2>
	 		   <p>兄弟之间组件需要 一新的/空的 Vue 实例作为中央事件总线 <span style="color:red;">兄弟组件接收 中央数据总线发送过来的参数 必须是对象或数组 否则中央数据总线数据变更时 无法实时响应</span>  更复杂的兄弟组件通信请参考Vuex</p>
	 		 </div>
	 		 
	 		 	 <div id="app8-2" style="padding:20px;">
	 		  <h3>我是app8-2 第八个Vue实例2 兄弟组件之间的通信</h3>
	 		   <my-component8></my-component8>
	 		   <my-component8-2></my-component8-2>
	 		   <p>兄弟之间组件需要 一新的/空的 Vue 实例作为中央事件总线 <span style="color:red;">兄弟组件接收 中央数据总线发送过来的参数 必须是对象或数组 否则中央数据总线数据变更时 无法实时响应</span>  更复杂的兄弟组件通信请参考Vuex</p>
	 		 </div>
	 		 
      </div>
</body>
</html>

<script>
Vue.component("my-content",{
	template : "<div style='border:1px solid red;'>Hello Word! 这是一个最简单最基本的全局组件 在任何Vue实例都可以使用</div>"	
});



 new Vue({
  el: '#app'
});
 
 new Vue({
	  el: '#app2',
	  components: {
		    'my-component2': {   
		    	 template: "<div style='border:1px solid green;'>这是一个最简单最基本的局部组件 由app2这个实例下渲染  只能在app2下使用</div>"
		     }
		  }
	});
 
  new Vue({
	  el: '#app3',
	  components: { 
		    'my-component3': {   
		    	 template: "<div style='border:1px solid orange;'>我是第三个实例下的 局部组件  <button v-on:click='computedCount'>点击试试 {{ count }} </button> </div>",
		    	 data :  function(){
		    		 return {
		    			 count : 0
		    		 }
		    	 },
		    	 methods : {
		    		 computedCount: function(){
		    			 this.count ++;
		    		 } 
		    	 }
		     }
		  }
	});
  
  new Vue({
	  el: '#app4',
	  components: { 
		    'my-component4': {   
		    	 template: "<div style='border:1px solid blue;'>我是第四个实例下的 局部组件  我有独立的初始值 {{ props}} </div>",
                 props: ['props']
		     }
		  }
	});
  
  new Vue({
	  el: '#app5',
	  components: { 
		    'my-component5': {   
		    	 template: "<div style='border:1px solid #666;'>我是第五个实例下的 局部组件 静态字符串初始值 — {{ string}} 动态javascript表达式初始值 —  {{props}} (亦可以是数组,对象)  <button v-on:click='add'>点击试试</button></div>",
                 props: ['string','props'],
                 methods:{
                	 add : function(){
                		 this.props++;
                	 }
                 }
                 
		     }
		  }
	});
  
  new Vue({
	  el: '#app6',
	  components: { 
		    'my-component6': {   
		    	 template: "<div style='border:1px solid #488;'>我是第六个实例下的 局部组件 接收props的参数必须是对象/(数组对象)  传递的第一个值为 {{ array }} 否则警告 。 接收的第二个参数必须是数字 传递的第二个值为 {{number }} 否则警告。 并将值重置为默认的100</div>",
		    	 props: { 
		    		 'array'  : Object,    //props验证 传递进来的props必须是对象 否则在控制台报错
		    		 'number': {
		    		      type: Number,     //props验证 传递进来的props必须是数字  否则在控制台报错 并且将值设为默认的100
		    		      default: 100
		    		    }
		    	 }
		    }
		  }
	});
  
  new Vue({
	  el: '#app7',
	  data:{
		  total : 10
	  },
	  methods:{
		  parentUpdate :function(receive){ //该事件由子组件驱动
			  this.total ++;  
		       alert("接收子组件传递过来的值（子组件是独立的）" +  receive);
		  }
	  },
	  components: {
		    'my-component7': {   
		    	 template: "<div style='border:1px solid green;'>我是第七个实例下的 局部组件  <button v-on:click='qudong'>点击试试 子组件的值 {{ childrenNumber }}</button></div>",
		    	 data : function(){
		    		 return {
		    			 childrenNumber : 5
		    		 }
		    	 },
		    	 methods:{
		    		 qudong:function(){
		    			 this.childrenNumber ++;
		    			 this.$emit('parent',this.childrenNumber);  //驱动父组件的 parent自定义事件
		    		 }
		    	 }
		     }
		  }
	});
  
  
  var bus = new Vue({
	 data : function(){
		 return {
			 todos:['A','B','C'],
			 todos2:['A','B','C'],
		     todos3:"1111"
		 }
	 },
	  created:function () {
			this.$on('method1', this.method1);
			this.$on('method2', this.method2);
		},
		beforeDestroy:function () {
			this.$off('method1', this.method1)
			this.$off('method2', this.method2)
		},
		methods: {
			method1: function (newTodo) {
				this.todos.push(newTodo)
			},
			method2: function (newTodo2) {
				this.todos2.push(newTodo2)
				this.todos3 = "aaaaa";
				alert(this.todos3);
			}
		}
  });
  
  new Vue({
	  el: '#app8',
	  components: { 
		    'my-component8': {   
		    	 template: "<div style='border:1px solid #666;'>我是第八个实例下的 局部组件 <button v-on:click='click1'>点击试试 </button> {{busmessage}} {{busmessage2}}</div>",
		    	 data :function(){
		    		 return {
		    			 busmessage : bus.todos2,
		    			 busmessage2 : bus.todos3
		    		 }
		    	 },
		    	 methods:{
		    		   click1 : function(){ 
		    			   bus.$emit('method1', "第一组件传递的值");
		    		   }
		    	
		    	 }
		     },
		     'my-component8-2': {   
		    	 template: "<div style='border:1px solid #666;'>我是第八个实例下的第二个局部组件  <button v-on:click='click2' >点击试试</button> {{busmessage}}</div>",
		    	 data :function(){
		    		 return {
		    			 busmessage : bus.todos
		    		 }
		    	 },
		    	 methods:{
		    		   click2 : function(){ 
		    			   bus.$emit('method2',"第二组件传递的值");
		    		   }
		    	
		    	 }
		     }
		  }
	});
  
  var bus2 = new Vue({
		 data : function(){
			 return {
				 todos:{
					 classname : "active",
					 message : ""
				 },
				 todos2:{
					 classname : "active2",
					 message : ""
				 }
			 }
		 },
		  created:function () {
				this.$on('method1', this.method1);
				this.$on('method2', this.method2);
			},
			beforeDestroy:function () {
				this.$off('method1', this.method1)
				this.$off('method2', this.method2)
			},
			methods: {
				method1: function (receive) {
					if(this.todos.classname == "active"){
					  this.todos.classname = "active2";
					}else{
						this.todos.classname = "active";	
					}
					this.todos.message += receive+"，";
				},
				method2: function (receive) {
					if(this.todos2.classname == "active"){
						this.todos2.classname = "active2";
						}else{
							this.todos2.classname = "active";	
						}
					this.todos2.message += receive+"，";
				}
			}
	  });
	  
	var oo =  new Vue({
		  el: '#app8-2',
		  components: { 
			    'my-component8': {   
			    	 template: "<div style='border:1px solid #666;'>我是第八个实例下的 局部组件 <button v-on:click='click1' v-bind:class='busmessage.classname'>点击试试 </button> {{busmessage.classname }}  {{busmessage.message }}</div>",
			    	 data :function(){
			    		 return {
			    			 busmessage : bus2.todos2 //这里busmessage的值必须是一个对象或数组 否则无法响应
			    		 }
			    	 },
			    	 methods:{
			    		   click1 : function(){ 
			    			   bus2.$emit('method1', "第一个兄弟组件传递的值");
			    		   }
			    	
			    	 }
			     },
			     'my-component8-2': {   
			    	 template: "<div style='border:1px solid #666;'>我是第八个实例下的第二个局部组件  <button v-on:click='click2' v-bind:class='busmessage.classname'>点击试试</button> {{busmessage.classname }} {{busmessage.message }}</div>",
			    	 data :function(){
			    		 return {
			    			 busmessage : bus2.todos //这里busmessage的值必须是一个对象或数组 否则无法响应
			    		 }
			    	 },
			    	 methods:{
			    		   click2 : function(){ 
			    			   bus2.$emit('method2',"第二个兄弟组件传递的值");
			    		   }
			    	
			    	 }
			     }
			  }
		});
  

</script>


